<template>
  <div>
    <el-dialog
      title="题目预览"
      :visible="showDialog"
      @close="closeDialogFn"
      @open="open"
    >
      <el-row :gutter="20" style="margin-top:0px">
        <el-col :span="6" class="col">【题型】: {{ questionType }}</el-col>
        <el-col :span="8" class="col"
          >【编号】：{{ QuestionDetail.number }}</el-col
        >
        <el-col :span="6" class="col"
          >【难度】：{{ formatterDifficulty(QuestionDetail) }}</el-col
        >
        <el-col :span="4" class="col"
          >【标签】：{{ QuestionDetail.tags }}</el-col
        >
      </el-row>
      <el-row :gutter="20" style="margin-top:0px">
        <el-col :span="6" class="col"
          >【学科】：{{ QuestionDetail.subjectName }}</el-col
        >
        <el-col :span="8" class="col"
          >【目录】：{{ QuestionDetail.directoryName }}</el-col
        >
        <el-col :span="6" class="col"
          >【方向】：{{ QuestionDetail.direction }}</el-col
        >
        <el-col :span="4" class="col"></el-col>
      </el-row>
      <hr />
      <div class="box">【题干】：</div>
      <div
        v-html="QuestionDetail.question"
        style="color: blue"
        class="box"
      ></div>
      <div class="box">
        {{ questionType }}
        选项：（以下选中的选项为正确答案）
      </div>
      <!-- 单选 -->
      <div class="radio" v-if="QuestionDetail.questionType === '1'">
        <el-radio-group :value="radioIsRigth[0]">
          <!-- <el-radio v-for="item in QuestionDetail.options" :key="item.id" :label="item.isRight">{{ item.title }}</el-radio> -->
          <el-row
            v-for="itme in QuestionDetail.options"
            :key="itme.id"
            class="box"
          >
            <el-radio :label="itme.isRight" :value="itme.id">{{
              itme.title
            }}</el-radio>
          </el-row>
        </el-radio-group>
      </div>
      <!-- 多选 -->
      <div class="checkbox" v-else-if="QuestionDetail.questionType === '2'">
        <el-checkbox-group :value="radioIsRigth">
          <el-row
            v-for="itme in QuestionDetail.options"
            :key="itme.id"
            class="box"
          >
            <el-checkbox :label="itme.isRight" :value="itme.id">{{
              itme.title
            }}</el-checkbox>
          </el-row>
        </el-checkbox-group>
      </div>
      <div></div>
      <hr />
      【参考答案】:
      <el-button type="danger" @click="openVideo(QuestionDetail.videoURL)"
        >视频答案预览</el-button
      >
      <div class="video" v-if="video">
        <video :src="QuestionDetail.videoURL" controls></video>
      </div>
      <hr />
      【答案解析】：
      <div v-html="QuestionDetail.answer" style="display:inline-block"></div>
      <hr />
      【题目备注】：{{ QuestionDetail.remarks }}
    </el-dialog>
  </div>
</template>

<script>
import {
  difficulty, // 难度
  questionType // 题型
} from '@/api/hmmm/constants'
export default {
  props: {
    showDialog: false, // 控制弹窗显示
    QuestionDetail: {} // 用来回显的数据
  },
  data () {
    return {
      questionType: null, // 题型
      questionNumber: null, // 题型对应的数据
      radioIsRigth: [1], // 控制单选多选是否选中
      video: false // 是否显示视频播放器
    }
  },
  methods: {
    // 视频按钮
    openVideo (src) {
      if (!src) {
        this.$message.success('这个题没有视频答案呦~')
        return
      }
      this.video = !this.video
    },
    // 打开弹窗
    open () {
      this.formatterQuestionType(this.QuestionDetail)
    },
    // 处理难度函数
    formatterDifficulty (data) {
      const res = difficulty.find((itme) => itme.value === data.difficulty)
      if (res === '' || res === undefined) return
      return res.label
    },
    // 处理题型函数
    formatterQuestionType (data) {
      const res = questionType.find((itme) => itme.value === data.questionType)
      if (!res) return
      this.questionType = res.label
      this.questionNumber = Number(data.questionType)
    },
    // 关闭弹窗
    closeDialogFn () {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang="scss">
.col {
  padding: 10px 0;
}
.box {
  margin-top: 10px;
}
.video {
  margin-top: 5px;
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
